
<style lang="less">
	page {
		background: #F5F5F5;
	}

	.container {
		padding: 30upx 30upx 0;
		box-sizing: border-box;
		margin-bottom: 50upx;
	}
	.head{
		background: #FFFFFF;
		border-radius: 24upx;
		box-sizing: border-box;
		.head_title{
			padding: 36upx 32upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #EDEDED;
			.head_title_txt{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
			}
			.head_title_img{
				width: 26upx;
				height: 26upx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
				.tips{
					border-radius: 10upx;
					box-shadow: 0upx 0upx 6upx 0upx rgba(221, 221, 221, 0.7);
					position: absolute;
					top: 52upx;
					right: -18upx;
					padding: 20upx;
					background-color: #FFFFFF;
					width: 250upx;
					border: 1upx solid #EDEDED;
					
					font-size: 24upx;
					font-weight: 500;
					color: #353526;
					line-height: 30upx;
					.tips_out{
						position: absolute;
						top: -30upx;
						right: 16upx;
						border-width: 14upx;
						border-style: solid dashed dashed dashed;
						border-color:  transparent transparent #EDEDED transparent;
					}
					.tips_in{
						position: absolute;
						top: -26upx;
						right: 16upx;
						border-width: 14upx;
						border-style: solid dashed dashed dashed;
						border-color: transparent transparent #FFFFFF  transparent;
					}
				}
			}
		}
		.head_down{
			padding: 36upx 20upx;
			display: flex;
			justify-content: space-around;
			.head_list{
				width: 32%;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;
				.head_list_txt{
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
					line-height: 26upx;
				}
				.head_list_nums{
					margin-top: 30upx;
					font-size: 50upx;
					font-family: "DINCond";
					font-weight: 400;
					color: #DBC291;
					line-height: 50upx;
				}
			}
		}
	}
	.vitality{
		width: 100%;
		background: #FFFFFF;
		border-radius: 24upx;
		padding: 40upx 30upx;
		box-sizing: border-box;
		margin: 26upx 0;
		.vitality_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 80upx;
			.vitality_title_fl{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
				.gray{
					font-size: 26upx;
					font-weight: bold;
					color: #999999;
					line-height: 26upx;
				}
			}
			.vitality_title_fr{
				font-size: 28upx;
				font-weight: bold;
				color: #DFCAA1;
				line-height: 28upx;
			}
		}
		.vitality_box{
			.back_img{
				margin: 0 auto;
				width: 600upx;
				height: 50upx;
				background: url(https://static.xpandago.net/wechat/images/vitality.png) no-repeat center / 100% 100%;
				position: relative;
				.vitality_img{
					width: 6upx;
					height: 64upx;
					position: absolute;
					top: -7upx;
					left: 0upx;
				}
				.vitality_img_txt{
					position: absolute;
					top: -40upx;
					left: 0;
					font-size: 22upx;
					font-weight: bold;
					color: #DFCAA1;
					line-height: 22upx;
				}
			}
			.vitality_nums{
				margin-top: 30upx;
				display: flex;
				// justify-content: space-between;
				view{
					font-size: 30upx;
					font-weight: 500;
					color: #333333;
					line-height: 20upx;
				}
				.numOne{
					margin-left: 36upx;
				}
				.numTwo{
					margin-left: 94upx;
				}
				.numTreen{
					margin-left: 206upx;
				}
				.numFour{
					margin-left: 80upx;
				}
			}
		}
	}
	
	.foot{
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		.foot_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30upx;
			.foot_title_txt{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
			}
			.foot_title_img{
				width: 32upx;
				height: 26upx;
			}
		}
		.charts-box {
		  width: 100%;
		  height: 600upx;
		}
		
	}
	// .dong{
	// 	animation: move 1s ease-in-out normal  forwards ;
	// }
	// @keyframes move{
	//             0%{
	// 				transform:rotateY(0)
	// 			}
	//             100%{
	// 				transform:rotateY(180deg)
	// 			}
	// }

</style>


<template>

	<view class="container">
		<view class="head">
			<view class="head_title">
				<view class="head_title_txt">活跃人数</view>
				<view class="head_title_img">
					<image src="https://static.xpandago.net/wechat/images/wenhao@2x.png" mode="widthFix" @tap="openTips"></image>
					<view class="tips" v-if="tips">
						活跃人数为统计选定时间范围内用户的登录数(去重)
						<text class="tips_out"></text>
						<text class="tips_in"></text>
					</view>
				</view>
			</view>
			<view class="head_down">
				<view class="head_list">
					<view class="head_list_txt">今日</view>
					<view class="head_list_nums">{{titleList[0]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">昨日</view>
					<view class="head_list_nums">{{titleList[1]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">本月</view>
					<view class="head_list_nums">{{titleList[2]}}</view>
				</view>
			</view>
		</view>
		<view class="vitality">
			<view class="vitality_title">
				<view class="vitality_title_fl">
					人均活跃度<text class="gray">（实时）</text>
				</view>
				<view class="vitality_title_fr">{{vitalityText}}</view>
			</view>
			<view class="vitality_box">
				<!-- <progress class="progress" percent="20" show-info stroke-width="20" active/> -->
				<view class="back_img">
					<image src="https://static.xpandago.net/wechat/images/zhizhen.png" mode="widthFix" :style="{left: absNum + 'upx'}" class="vitality_img"></image>
					<view class="vitality_img_txt" :style="{left: absNum - 10 + 'upx'}">{{vitalityNum}}</view>
				</view>
				<view class="vitality_nums">
					<view>低</view>
					<view class="numOne">5</view>
					<view class="numTwo">15</view>
					<view class="numTreen">35</view>
					<view class="numFour">45</view>
					<!-- <view>高</view> -->
				</view>
			</view>
		</view>
		<view class="foot" v-if="lineIndex == 0">
			<view class="foot_title">
				<view class="foot_title_txt">人均活跃度趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="switchCharts(1)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="lineB" :chartData="canvasLineOne"  :ontouch="true"/>
			</view>
		</view>
		<view class="foot" v-else-if="lineIndex == 1">
			<view class="foot_title">
				<view class="foot_title_txt">活跃人数趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="switchCharts(0)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="lineB" :chartData="canvasLineTwo"  :ontouch="true"/>
			</view>
		</view>
		
	</view>

</template>

<script>
	import api from '@/common/api';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
  export default {

    components: {},

    data () {

      return {
		  token:'',
		  // token:'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6IjhmM2JhNWZkMmJlYWM0Njc3NGNlYmE3Nzk4YjRlMmM0IiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2MjIxNjg5ODE5NDAsImV4cCI6MTYyNDc2MDk4MSwidXNlcl9ncm91cF9pZCI6Mjg2NjN9.NCgte1bZrTHr7KHixPfJInXPhiUyQVrVmHpK7SrzFwnYgVlsRlfxjyn6pCWGmaGFeR2UkvJsZvQBHmnDEhTpNA',
		  vitalityNum:0,  //活跃度
		  absNum:0,  // 定位 left值
		  vitalityText:'低',  //活跃度等级
		  titleList:[],  // 标题数据
		  canvasLineOne:{}, //人均活跃度趋势
		  canvasLineTwo:{}, //活跃人数趋势
		  tips: false,  //问号弹窗
		  lineIndex:0,  //切换
		 
	  }
    },
	onLoad(){
		this.token=uni.getStorageSync('token')
		this.activityNum()
		
	},
    methods: {
		
		openTips(){
			this.tips = !this.tips
		},
		switchCharts(i){
			this.lineIndex = i
		},
		async activityNum(){
			const [err, res] = await api.activityNum({
				header:{
					'token': this.token
				}
			 });
			 // console.log(res)
			 if(res.data.code == 0){
				this.titleList = res.data.data
				let vitalityNum = parseFloat(res.data.data[3])
				console.log(vitalityNum)
				if(vitalityNum >= 0 && vitalityNum <= 15){
					this.vitalityText = '低'
				}else if (vitalityNum > 15 && vitalityNum <= 35){
					this.vitalityText = '正常'
				} else if(vitalityNum > 35){
					this.vitalityText = '高'
				}
				if(vitalityNum > 50){
					this.absNum = 600
				}else{
					this.absNum = vitalityNum / 50 * 600
				}
				this.vitalityNum = vitalityNum
				this.activityTrend()
			}
		},
		async activityTrend(){
			const [err, res] = await api.activityTrend({
				header:{
					'token': this.token
				}
			 });
			 // console.log(res)
			 if(res.data.code == 0){
				 let result = res.data.data
				 // 人均活跃度趋势
				let canvasLineOne={categories:[],series:[]};
				canvasLineOne.categories=result.days
				canvasLineOne.series=[{
						 name: '本月',
						 data: result.average,
					},{
						 name: '上月',
						 data: result.averageLast,
					}]
				this.canvasLineOne = canvasLineOne
				// 活跃人数趋势
				let canvasLineTwo={categories:[],series:[]};
				canvasLineTwo.categories=result.days
				canvasLineTwo.series=[{
						 name: '本月',
						 data: result.person,
					},{
						 name: '上月',
						 data: result.personLast,
					}]
				this.canvasLineTwo = canvasLineTwo
			}
		},
	},

  }
</script>